page-new-feature {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  $gradient1-light: #d8defd;
  $gradient2-light: #f3f4f9;
  $gradient1-dark: #606060;
  $gradient2-dark: #202124;

  .new-feature-slides {
    .slide-zoom {
      height: 100%;
    }
    .swiper-pagination-bullet {
      background: grey;
      opacity: 0.2;
    }
    .swiper-pagination-bullet-active {
      background: #4f6ef7;
      opacity: 1;
    }

    ion-slide {
      .supperior-container {
        position: relative;
        height: 64%;
        background: linear-gradient(
          180deg,
          $gradient1-light 0%,
          $gradient2-light 100%
        );
        .page-title {
          text-align: center;
          width: 100%;
          line-height: 30px;
          font-size: 18px;
          font-weight: 500;
          color: #1a3b8b;
          top: 2em;
          padding: 2em 0 2em 0;
        }
        .img-container {
          display: contents;
          img {
            display: block;
            width: 80%;
            bottom: 0;
            margin: 0 auto;
            transform: translateY(0);
            @media screen and (min-width: 768px) {
              transform: translateY(-20px);
              max-width: 220px;
            }
          }
        }
      }

      .slide-info {
        background-color: #ffffff;
        height: 100%;
        box-shadow: 0 -3px 20px 0 rgba(0, 0, 0, 0.05);
        position: relative;
        .title {
          text-align: center;
          font-size: 18px;
          color: #000000;
          font-weight: 800;
          line-height: 30px;
          padding-top: 2em;
          @media only screen and (min-width: 320px) and (max-width: 440px) and (max-height: 667px) {
            font-size: 14px;
            line-height: 20px;
          }
        }
        .text {
          text-align: center;
          font-size: 16px;
          color: #6d7386;
          line-height: 25px;
          width: 67%;
          position: absolute;
          left: 15%;
          padding-top: 0.1em;
          @media only screen and (min-width: 320px) and (max-width: 440px) and (max-height: 667px) {
            font-size: 12px;
            line-height: 15px;
          }
        }
      }
    }
  }
  .next-slide-button {
    z-index: 1;
    position: absolute;
    bottom: 2rem;
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    bottom: -webkit-calc(2rem + env(safe-area-inset-bottom));
    right: 0;
    color: #4f6ef7;
    cursor: pointer;
    text-transform: uppercase;
  }

  .try-it-button {
    z-index: 1;
    position: absolute;
    bottom: 2rem;
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    bottom: -webkit-calc(2rem + env(safe-area-inset-bottom));
    color: #ffffff;
    background-color: color($colors, primary);
    cursor: pointer;
    text-transform: uppercase;
    width: 25%;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .img-fit {
    background-color: linear-gradient(
      180deg,
      $gradient1-light 0%,
      $gradient2-light 100%
    );
  }
  @media (orientation: portrait) {
    .img-fit {
      background-size: contain;
    }
  }
  @media (orientation: landscape) {
    .img-fit {
      background-size: auto 100%;
    }
  }

  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 3rem;
  }
}
